<template>
  <move-dialog
    :visible="show"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="480px"
    :title="`${type === 'add' ? '新建' : '编辑'}动态表单模版字段`"
  >
    <el-form :model="form" :rules="rules" label-position="top" ref="formRef">
      <el-form-item prop="field">
        <template #label>
          选择字段
          <span v-if="type === 'add'" class="tip"
            >字段需要先在<span class="link" @click="toPage">【全局字段】</span>页面进行编辑后才可选择</span
          >
        </template>
        <el-select-v2
          v-model="form.field"
          filterable
          clearable
          collapse-tags
          collapse-tags-tooltip
          :options="getGlobalFields"
          style="width: 100%"
          :disabled="type === 'edit'"
          placeholder="请选择要添加的字段"
        >
        </el-select-v2>
      </el-form-item>
      <el-form-item label="是否必填" prop="required">
        <el-radio :label="true" v-model="form.required">是</el-radio>
        <el-radio :label="false" v-model="form.required">否</el-radio>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-radio :label="1" v-model="form.status">启用</el-radio>
        <el-radio :label="0" v-model="form.status">停用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button link @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </template>
  </move-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
import moveDialog from '@/common/components/move-dialog/index.vue'
import { useRouter } from 'vue-router'
import { commonStore } from '@/common/store/modules/common'
const defaultForm = {
  field: '',
  required: false,
  status: 1
}
export default defineComponent({
  name: 'AddField',
  components: { moveDialog },
  emits: ['onSaveData'],
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      show: false,
      form: defaultForm,
      rules: {
        field: [{ required: true, message: '请选择要添加的字段', trigger: 'change' }],
        required: [{ required: true, message: '请选择是否必填', trigger: 'change' }],
        status: [{ required: true, message: '请选择当前状态', trigger: 'change' }]
      },
      type: ''
    })

    const globalFields: any = computed(() => {
      // 全局字段
      return commonStore().publicCache.globalFieldCache || []
    })

    const tempListObj = computed(() => {
      // 已选择的模版字段
      const obj: any = {} // 存储
      if (props.tableData && props.tableData.length) {
        props.tableData.forEach((item: any) => {
          obj[item.field] = item
        })
      }
      return obj
    })

    const getGlobalFields = computed(() => {
      // 处理全局字段
      const glo_arr: any = []
      if (globalFields.value && globalFields.value.length) {
        globalFields.value.forEach((item: any) => {
          if (item.status && !tempListObj.value[item.field] && state.type === 'add' && item.category === 'custom') {
            // 启用字段 && 模版列表中不存在的字段 && 全局字段中的自定义字段 && 新增
            glo_arr.push({
              label: item.name,
              value: item.field
            })
          } else if (state.type === 'edit') {
            // select回显需全量字段
            glo_arr.push({
              label: item.name,
              value: item.field
            })
          }
        })
      }
      return glo_arr
    })

    const $router = useRouter()
    const instance: any = getCurrentInstance()

    const openDialog = (type: string, row: any) => {
      state.type = type
      state.show = true
      state.form = { ...defaultForm, ...row }
    }

    const closeDialog = () => {
      state.show = false
    }

    const save = () => {
      instance?.refs.formRef.validate((valid: boolean) => {
        if (valid) {
          closeDialog()
          emit('onSaveData', state.form, state.type)
          state.type = 'edit' // 处理关闭瞬间 选择字段 处变成field的情况
        }
      })
    }

    const toPage = () => {
      $router.push('/account/global_field')
    }

    return {
      getGlobalFields,
      closeDialog,
      openDialog,
      save,
      toPage,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.tip
  color rgba(0, 0, 0, 0.38)
  font-size 12px
  .link
    cursor pointer
    font-weight 500
    padding-left 0 !important
    color var(--mc-main-color) !important
</style>
